<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas width="400" height="400" id="canvas">
        请升级你的服务器
    </canvas>
    <!-- <img src="./diff.jpg" alt=""id="img"> -->
    <button id="btn">按钮</button>
    <script>
        var canvas = document.querySelector('#canvas')
        var context = canvas.getContext('2d');
        
        var btn = document.querySelector('#btn')
        context.rect(0,0,200,200);
        context.fillStyle='rgba(0,0,0,0.5)';
        context.fill();
        
        
        context.textAlign = 'center';
        context.font = '40px sans-serif';
        context.fillStyle='#f00';
        context.fillText('特效字体', 200, 200);

        // context.fillRect(0,0,400,400);
        // var image = new Image()
        // image.src = "./diff.jpg"
        // image.onload = function () {
           
        //     context.drawImage(image, 0, 0);
        // }
        // window.onload = function () {
        //     var image = document.querySelector('#img')
        //     context.drawImage(image, 0, 0);
        // }



        // btn.onclick = function () {
        //     for (let i = 0, length = textData.data.length; i < length; i++) {
        //         if (i % 4 === 0) {
        //             textData.data[i] = 255 - textData.data[i]
        //         } else if (i % 4 === 1) {
        //             textData.data[i] = 255 - textData.data[i]
        //         } else if (i % 4 === 2) {
        //             textData.data[i] = 255 - textData.data[i]
        //         } else if (i % 4 === 3) {
        //             textData.data[i] = 255
        //         }
        //     }
        //     context.putImageData(textData, 0, 0);
        // }
        canvas.onclick = function (event) {
            var canvas = document.querySelector('#canvas')
            var context = canvas.getContext('2d');
            var textData = context.getImageData(0, 0, 400, 400);
            console.log('textData', textData)
            var x = event.offsetX;
            var y = event.offsetY;
            console.log(x, y)
            var index = postion2index(x, y, canvas)
            console.log('index', index)
            console.log(getRgba(textData.data, index))
        }
        function postion2index(x, y, canvas) {
            var imageData = context.getImageData(0, 0, 400, 400);
            var w = canvas.width;
            var h = canvas.height;
            return (y * w + x) * 4 - 4;
        }
        function getRgba(list, index) {
            var str = `rgba(${list[index]},${list[index + 1]},${list[index + 2]},${list[index+3]})`
            return str
        }


        // context.rect(0, 0, 50, 50);
        // context.globalAlpha=0.1;
        // context.fill();
        // var imageData = context.getImageData(0, 0, 1, 1);
        // // console.log(imageData,imageData.data.length)
        // var myImageData = context.createImageData(400, 400);
        // console.log('myImageData1', myImageData)
        // for (let i = 0, length = myImageData.data.length; i < length; i++) {
        //     if (i % 4 === 0) {
        //         myImageData.data[i] += Math.random() * 255
        //     } else if (i % 4 === 1) {
        //         myImageData.data[i] += Math.random() * 255
        //     } else if (i % 4 === 2) {
        //         myImageData.data[i] += Math.random() * 255
        //     } else if (i % 4 === 3) {
        //         myImageData.data[i] += Math.random() * 255
        //     }
        // }
        // myImageData.data.forEach((item, index) => {
        // if (i % 4 === 0) {
        //     item += 100
        // } else if (i % 4 === 1) {
        //     item += 150
        // } else if (i % 4 === 2) {
        //     item += 200
        // } else if (i % 4 === 3) {
        //     item += 250
        // }
        // })

        // imageData.data = data
        // console.log('data',data)
        // console.log('myImageData2', myImageData)
        // context.putImageData(myImageData, 0, 0);

        var p = new Promise(reslove => {
            console.log('Promise')
            setTimeout(function () {
                reslove(11)
            },2000)
        })
        p.then(res=>{
            console.log(res)
        })
        setTimeout(function () {
            console.log('setTimeout')
        },1000)










    </script>
</body>

</html>